<template>
  <a-modal width="610px" v-model:open="open" title="移动分组" @ok="handleOk" @cancel="handleCancel">
    <a-form ref="formRef" :model="areaForm" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
      <a-form-item label="移动到" name="regionId">
        <a-spin v-if="regionStore.loading" />
        <a-tree-select
          v-else
          v-model:value="areaForm.regionId"
          placeholder="请选择"
          :tree-data="regionStore.regionTreeData"
          :field-names="{
            label: 'name',
            value: 'weight',
          }"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { reactive, ref, type UnwrapRef } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { message } from 'ant-design-vue';
  import constantStore from '@/store/modules/constant';
  import { reqUpdateCustomer, reqBatchUpdateCustomer } from '@/api/home/customerInformation';
  import { reqChangeDeviceRegion } from '@/api/home/deviceManagement';
  const emit = defineEmits(['refresh-event']);
  const formRef = ref(); //表单实例
  const open = ref<boolean>(false); //弹窗开关

  // 表单
  interface FormState {
    regionId: any;
  }
  const areaForm: UnwrapRef<FormState> = reactive({
    regionId: null,
  });
  const rules: Record<string, Rule[]> = {
    regionId: [{ required: true, message: '请选择分组', trigger: 'change' }],
  };

  // 地域树store
  const regionStore = constantStore();

  // 弹窗初始化
  let moveType = '';
  let queryId = '';
  const toggleOpen = (id, type) => {
    moveType = type;
    queryId = id;
    areaForm.regionId = '';
    open.value = true;
  };
  defineExpose({
    toggleOpen,
  });

  const getRequestParams = () => {
    let params = {};
    if (moveType === 'customer') {
      params = {
        id: queryId,
        regionId: areaForm.regionId,
      };
    } else if (moveType === 'batchCustomer') {
      params = {
        customerIdList: queryId,
        regionId: areaForm.regionId,
      };
    } else {
      params = {
        regionId: areaForm.regionId,
        deviceIds: queryId,
      };
    }
    return params;
  };

  // 处理上传
  const handleOk = async () => {
    let updateFuncName: any = null;
    if (moveType === 'customer') {
      updateFuncName = reqUpdateCustomer;
    } else if (moveType === 'batchCustomer') {
      updateFuncName = reqBatchUpdateCustomer;
    } else {
      updateFuncName = reqChangeDeviceRegion;
    }
    try {
      //校验表单
      await formRef.value.validateFields();
      const params = getRequestParams();
      await updateFuncName({
        data: params,
      });
      message.success('移动成功');
      open.value = false;
      // 清空缓存
      areaForm.regionId = null;
      emit('refresh-event');
    } catch (error) {
      console.log(error);
    }
  };

  // 处理cancel
  const handleCancel = () => {
    formRef.value.resetFields();
    moveType = '';
    queryId = '';
  };
</script>
<style scoped lang="scss">
  .form-text {
    margin-top: 8px;
    color: #00000073;
  }
</style>
